<template>
  <div>
    <div>
      <el-row>
        <el-col :span="6">
          <el-input
            v-model="searchInput"
            placeholder="根据员工id查找培训记录"
            prefix-icon="el-icon-search"
            @input="watchsearch"
          ></el-input>
        </el-col>
        <!--        <el-col :span="4">-->
        <!--          <el-button @click="getEmployeeById">-->
        <!--            搜索-->
        <!--          </el-button>-->
        <!--        </el-col>-->

        <el-col :span="4">
          <el-select v-model="seetype" placeholder="请选择查看类型" @change="ClearInput">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button @click="newTrain">新建培训</el-button>
        </el-col>
        <el-col :span="2">

          <el-button @click="exportExcel">导出培训表</el-button>
        </el-col>
        <el-col :span="4">
          <el-button @click="returnlogin">返回首页</el-button>
        </el-col>
      </el-row>
    </div>
    <div id="tables">
      <el-table
        :data="train"
        :row-style="{height: '0'}"
        :cell-style="{padding: '0'}"
        style="width: 100%"
        @row-click="getDetails"
        id="out-table"
      >
        <!--        <el-table-column label width="35">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-radio :label="scope.row.name" v-model="radioId">&nbsp;</el-radio>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column align="center" prop="trainrage" label="培训编列" width="75" fixed></el-table-column>
        <el-table-column align="center" prop="userId" label="员工Id" width="100" fixed></el-table-column>
        <el-table-column align="center" prop="username" label="姓名" width="75"></el-table-column>
        <el-table-column align="center" prop="gender" label="性别" width="75"></el-table-column>
        <el-table-column align="center" prop="trainskill" label="培训内容" width="75"></el-table-column>
        <el-table-column align="center" prop="trainstartdate" label="培训开始日期" width="160"></el-table-column>
        <el-table-column align="center" prop="trainenddate" label="培训结束日期" width="160"></el-table-column>
        <el-table-column align="center" prop="transportSalary" label="车旅费" width="120"></el-table-column>
        <el-table-column align="center" prop="ischeck" label="是否被审批通过" width="120"></el-table-column>
        <el-table-column align="center" prop="isfinish" label="是否完成培训" width="120"></el-table-column>
        <el-table-column align="center" prop="remark" label="报表内容" width="200"></el-table-column>
        <el-table-column fixed="right" width="200" label="操作">
          <template slot-scope="scope">
            <el-button v-show="scope.row.ischeck==0" @click="beginTrain(scope.row)" style="padding: 3px" size="mini" type="success">开始培训</el-button>
            <el-button v-show="scope.row.ischeck==0&&scope.row.isfinish==0" @click="cancelTrain(scope.row)" style="padding: 3px" size="mini" type="danger">取消培训</el-button>
            <el-button v-show="scope.row.isfinish==0&&scope.row.ischeck==1" @click="EndTrain(scope.row)" style="padding: 3px" size="mini" type="primary">完成培训</el-button>

<!--            <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="danger">删除-->
<!--            </el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="新 建 培 训"
      :visible.sync="newTraindialog"
      width="80%"
      :before-close="handleClose">



      <el-table
        :data="trainemp"
        :row-style="{height: '0'}"
        :cell-style="{padding: '0'}"
        style="width: 100%"
        @row-click="getDetails"

      >
        <el-table-column align="center" prop="userId" label="员工Id" width="100" fixed></el-table-column>
        <el-table-column align="center" prop="username" label="姓名" width="75"></el-table-column>
        <el-table-column align="center" prop="gender" label="性别" width="75"></el-table-column>
        <el-table-column align="center" prop="departmentId" label="部门Id" width="75"></el-table-column>
        <el-table-column align="center" prop="departmentName" label="部门名" width="80"></el-table-column>
        <el-table-column align="center" prop="workId" label="工号" width="75"></el-table-column>
        <el-table-column align="center" prop="workName" label="职位" width="75"></el-table-column>
        <el-table-column align="center" prop="role" label="权限" width="75"></el-table-column>
<!--        <el-table-column align="center" prop="istrain" label="" width="75"></el-table-column>-->
        <el-table-column fixed="right" width="200" label="操作">
          <template slot-scope="scope">
            <el-button @click="starttrain(scope.row)" style="padding: 3px" size="mini">开始培训</el-button>
            <!--          <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="primary">查看-->
            <!--          </el-button>-->
          </template>
        </el-table-column>
      </el-table>



      <span slot="footer" class="dialog-footer">
    <el-button @click="newTraindialog = false">取 消</el-button>

  </span>
    </el-dialog>

    <el-dialog
      title="培 训 选 择"
      :visible.sync="Trainsessiondialog"
      width="30%"
      :before-close="handleClose">
      <span slot="footer" class="dialog-footer">

           <el-form ref="form" label-width="100px" v-model="trains" :rules="rule">
        <el-row>
          <el-col :span="6">
            <el-form-item label="培训起始时间">
               <el-date-picker
                 size="mini"
                 type="datetime"
                 placeholder="请选择培训起始时间和日期"
                 value-format="yyyy-MM-dd HH:mm:ss"
                 v-model="trains.trainstartdate">
    </el-date-picker></el-form-item>
          </el-col>
<!-- <el-col :span="6">-->
<!--            <el-form-item label="选择培训结束时间">-->
<!--               <el-date-picker-->
<!--                 size="mini"-->
<!--                 type="datetime"-->
<!--                 placeholder="请选择培训起始时间和日期"-->
<!--                 value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                 v-model="trains.trainstartdate">-->
<!--    </el-date-picker></el-form-item>-->
<!--          </el-col>-->
        </el-row>

      </el-form>
    <span>{{trains.trainstartdate}}</span>

    <el-button @click="Trainsessiondialog = false">取 消</el-button>
    <el-button type="primary" @click="submitCheck">确 定 </el-button>
  </span>
    </el-dialog>


    <el-dialog
      title="报 表 提 交"
      :visible.sync="FinDialog"
      width="30%"
      :before-close="handleClose">
      <span slot="footer" class="dialog-footer">

           <el-form ref="form" label-width="100px" v-model="trains" :rules="rule">
        <el-row>
          <el-col :span="20">
            <el-form-item label="工作报表">
               <el-input v-model="trains.remark" maxlength="30">
               </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">-->
          <!--            <el-form-item label="选择培训结束时间">-->
          <!--               <el-date-picker-->
          <!--                 size="mini"-->
          <!--                 type="datetime"-->
          <!--                 placeholder="请选择培训起始时间和日期"-->
          <!--                 value-format="yyyy-MM-dd HH:mm:ss"-->
          <!--                 v-model="trains.trainstartdate">-->
          <!--    </el-date-picker></el-form-item>-->
          <!--          </el-col>-->
        </el-row>

      </el-form>
    <span>培训起始日期：{{trains.trainstartdate}}</span>

    <el-button @click="FinDialog = false">取 消</el-button>
    <el-button type="primary" @click="submitFinish">完 成 </el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="培 训 内 容 填 写"
      :visible.sync="Traincreatedialog"
      width="60%"
      :before-close="handleClose">
      <span slot="footer" class="dialog-footer">

           <el-form ref="form" label-width="100px" v-model="trains" :rules="rule">
        <el-row>
          <el-col :span="8">
            <el-form-item label="培训内容">
              <el-input  v-model="trains.remark"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车旅费">
              <el-input v-model="trains.transportSalary"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>


    <el-button @click="Traincreatedialog = false">取 消</el-button>
    <el-button type="primary" @click="OncreateNewTrain">创 建</el-button>
  </span>
    </el-dialog>





<!--    <div class="block">-->
<!--      <span class="demonstration">起始日期时刻为 12:00:00</span>-->
<!--      <el-date-picker-->
<!--        v-model="value6"-->
<!--        @change="dateChangebirthday1"-->
<!--        type="datetimerange"-->
<!--        format="yyyy-MM-dd HH:mm"-->
<!--        value-format="yyyy-MM-dd HH:mm"-->
<!--        start-placeholder="开始日期"-->
<!--        end-placeholder="结束日期"-->
<!--        :default-time="['12:00:00']"-->
<!--      ></el-date-picker>-->
<!--    </div>-->
<!--  <div>-->
<!--    <el-date-picker-->
<!--    size="mini"-->
<!--    type="datetime"-->
<!--    placeholder="请选择培训时间和日期"-->
<!--    value-format="yyyy-MM-dd HH:mm:ss"-->
<!--    v-model="traintime"-->
<!--    >-->

<!--    </el-date-picker>-->
<!--  </div>-->
<!--  <span>{{traintime}}</span>-->

  </div>

</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
    export default {
        name: "train_management",
      data() {
        return {
          traintime:"",
          value6: "",
          startTime: "",
          searchInput:"",
          IsFinish:"",
          IsCheck:"",
          seetype:"trainrageAsc",
          options:[
            {
            label:"默认",
            value:"trainrageAsc",
            },
            {
              label:"审批中",
              value:"nocheck",
            },
            {
              label:"已审批",
              value:"ischeck",
            },
            {
              label:"培训中",
              value:"nofinish",
            },
            {
              label:"培训完成",
              value:"isfinish",
            },
          ],




          trainemp:[],
          trainemps:{
            userId: "",
            username: "",
            gender: "",
            workId:  "",
            workName: "",
            departmentId: "",
            departmentName:"",
            role:"",
            istrain: "",
            remark:"",


          },
          train:[],
          trains:{
            trainrage:"",
            userId:"",
            username:"",
            gender:"",
            trainskill:"",
            trainstartdate:"",
            trainenddate:"",
            ischeck:"",
            isfinish:"",
            remark:"",
          },


          newTraindialog:false,
          Trainsessiondialog:false,
          Traincreatedialog:false,
          FinDialog : false,
        };
      },
      mounted() {
          this.reloadtrain()
        this.reloadnewTrain()
      },
      methods: {
        //定义导出Excel表格事件
        exportExcel() {
          let xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
          / generate workbook object from table /;
          /* 从表生成工作簿对象 */
          let table =  document.querySelector("#out-table").cloneNode(true)
          // 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
          table.removeChild(table.querySelector(".el-table__fixed-right"));
          table.removeChild(table.querySelector(".el-table__fixed"));
          let wb = XLSX.utils.table_to_book(
            table ,  //elementui 表格的id
            xlsxParam
          );

          /* 获取二进制字符串作为输出 */
          var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
          });
          try {
            FileSaver.saveAs(
              //Blob 对象表示一个不可变、原始数据的类文件对象。
              //Blob 表示的不一定是JavaScript原生格式的数据。
              //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
              //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
              new Blob([wbout], { type: "application/octet-stream" }),
              //设置导出文件名称
              "员工培训表.xlsx"
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
          }
          return wbout;
        },
          reloadtrain()
          {
            this.train = []
            this.$axios.post("/Employee_train/selectAlltrain",{}).then((res)=>{
              this.train = res.data
            })
          },
          ClearInput()
          {
            this.reloadtrain()
            this.searchInput =""
          },

        returnlogin(){
          this.$store.commit("setviewPage",1);
          this.$router.push({path: '/home'})
        },
        watchsearch()
        {
          var see = JSON.stringify(this.seetype).replace(/\"/g, "")
          // alert(see)
          if(this.searchInput ==''|| this.searchInput =='undefined'||this.searchInput == null)
          {
            this.reloadtrain()
          }else if(see == 'trainrageAsc'){
            this.train = []
            this.$axios.post("/Employee_train/selectTrainByuserId",{
              userId:this.searchInput
            }).then((res)=>{
              this.train = res.data
            })
          }else if(see =='nocheck')
          {
            this.train = []
            this.$axios.post("/Employee_train/selectTrainByIsCheck",{
              userId:this.searchInput,
              ischeck:0
            }).then((res)=>{
              this.train = res.data
            })
          }else if(see =='ischeck')
          {
            this.train = []
            this.$axios.post("/Employee_train/selectTrainByIsCheck",{
              userId:this.searchInput,
              ischeck:1
            }).then((res)=>{
              this.train = res.data
            })
          }else if(see =='isfinish')
          {
            this.train = []
            this.$axios.post("/Employee_train/selectTrainByIsFinish",{
              userId:this.searchInput,
              isfinish:1
            }).then((res)=>{
              this.train = res.data
            })
          }
          else if(see =='nofinish')
          {
            this.train = []
            this.$axios.post("/Employee_train/selectTrainByIsFinish",{
              userId:this.searchInput,
              isfinish:0
            }).then((res)=>{
              this.train = res.data
            })
          }

        },
        dateChangebirthday1(val) {
          this.startTime = val;
          this.$message.success(this.startTime);
        },
        reloadnewTrain()
        {
          this.trainemp = [];
          this.$axios.post("/Employee_train/selectTrainEmp")
            .then((res)=>{
              this.trainemp = res.data
            })
        },
        newTrain()
        {

      this.newTraindialog =true
        },
        starttrain(data)
    {

      this.trains.trainrage="",
      this.trains.userId="",
      this.trains.username="",
      this.trains.gender="",
      this.trains.trainskill="",
      this.trains.trainstartdate="",
      this.trains.trainenddate="",
      this.trains.ischeck="",
      this.trains.isfinish="",
      this.trains.remark="",
        this.trains = data
      this.Traincreatedialog = true;
      // this.Trainsessiondialog = true;
      // this.$confirm('确认选择'+JSON.stringify(data.userId).replace(/\"/g, "")+"培训?")
      //   .then(_ => {
      //
      //       this.$axios.post("/Employee_train/",{
      //           userId:this.trains.userId,
      //           username:this.trains.username,
      //           gender:this.trains.gender,
      //           trainskill:this.trains.trainskill,
      //       })
      //
      //     this.newTraindialog = false
      //     this.reloadtrain()
      //     done();
      //   })
      //   .catch(_ => {
      //
      //
      //   });
    },
        beginTrain(data)
        {
          this.trains.trainrage="",
            this.trains.userId="",
            this.trains.username="",
            this.trains.gender="",
            this.trains.trainskill="",
            this.trains.trainstartdate="",
            this.trains.trainenddate="",
            this.trains.ischeck="",
            this.trains.isfinish="",
            this.trains.remark="",
            this.trains = data
          this.Trainsessiondialog =true
          alert(JSON.stringify(this.trains))
        },
        cancelTrain(data)
        {
          this.trains.trainrage="",
            this.trains.userId="",
            this.trains.username="",
            this.trains.gender="",
            this.trains.trainskill="",
            this.trains.trainstartdate="",
            this.trains.trainenddate="",
            this.trains.ischeck="",
            this.trains.isfinish="",
            this.trains.remark="",
            this.trains = data,
            this.$confirm('确认关闭？')
              .then(_ => {
               this.$axios.post("/Employee_train/CancelNotCheckTrain",{
                 userId:this.trains.userId,
                 trainrage:this.trains.trainrage
               }).then((res)=>{

                 this.$axios.post("/Employee_train/selectAlltrain",{}).then((res)=>{
                   this.train = res.data
                 })
                 this.trainemp = [];
                 this.$axios.post("/Employee_train/selectTrainEmp")
                   .then((res)=>{
                     this.trainemp = res.data
                   })
                        this.$message.success(res.data.msg)
               })
                this.reloadtrain()
                this.reloadnewTrain()
                done();
              })
              .catch(_ => {


              });
        },
        EndTrain(data)
        {
          this.trains.trainrage="",
            this.trains.userId="",
            this.trains.username="",
            this.trains.gender="",
            this.trains.trainskill="",
            this.trains.trainstartdate="",
            this.trains.trainenddate="",
            this.trains.ischeck="",
            this.trains.isfinish="",
            this.trains.remark="",
            this.trains = data,
            this.FinDialog = true
        },
        submitFinish()
        {

          this.$axios.post("/Employee_train/FinishTrain",{
            remark:this.trains.remark,
            trainrage:this.trains.trainrage,
            trainenddate:this.getNowFormatDate(),
            userId:this.trains.userId
          }).then((res)=>{
              this.reloadtrain()
              this.reloadnewTrain()
              this.$message.success(res.data.msg)
          })
          this.FinDialog = false
        },
        submitCheck()
        {
          this.$axios.post("/Employee_train/StartTrain",{
            userId:this.trains.userId,
            username:this.trains.username,
            trainrage:this.trains.trainrage,
            ischeck:this.trains.ischeck,
            trainstartdate:this.trains.trainstartdate
          }).then((res)=>{
            if(res.status == 200)
            {
              this.reloadtrain()
              this.reloadnewTrain()
              this.$message.success(res.data.msg)
              this.Trainsessiondialog = false
            }

          })
        },
        OncreateNewTrain()
        {



                this.$axios.post("/Employee_train/InsertNewTrain",{
                    userId:this.trains.userId,
                    username:this.trains.username,
                    gender:this.trains.gender,
                    trainskill:this.trains.trainskill,
                  transportSalary:this.trains.transportSalary
                }).then((res)=>{
                  if(res.status == 200)
                  {
                    this.$message.success(res.data.msg)
                    this.train = []
                    this.$axios.post("/Employee_train/selectAlltrain",{}).then((res)=>{
                      this.train = res.data
                    })
                  }
                })
          this.reloadtrain()
          this.reloadnewTrain()
              this.newTraindialog = false
              this.Traincreatedialog = false

              done();
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              this.Trainsessiondialog = false
              this.newTraindialog = false
              this.Traincreatedialog =false
              this.FinDialog = false
              this.reloadtrain()
              this.reloadnewTrain()
              done();
            })
            .catch(_ => {


            });
        },
        getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
        + " " + date.getHours() + seperator2 + date.getMinutes()
        + seperator2 + date.getSeconds();
      return currentdate;
    }

    },

    }
</script>

<style scoped>

</style>
